<template>
    <div class="main-con flex flex-column flex1" style="height: 100%">
        <div style="padding-bottom: 16px">
            <a-breadcrumb>
                <a-breadcrumb-item>首页</a-breadcrumb-item>
                <a-breadcrumb-item>体测计划</a-breadcrumb-item>
                <a-breadcrumb-item>预约管理</a-breadcrumb-item>
            </a-breadcrumb>
        </div>

        <div class="flex flex1">
            <div class="flex1">
                <div>
                    <a-space>
                        <a-button type="primary" @click="openAddDialog">新增预约项</a-button>
                    </a-space>
                </div>
                <div style="padding: 16px 0">
                    <a-grid :cols="{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }" :colGap="12" :rowGap="16"
                        class="grid-demo-grid">
                        <a-grid-item v-for="reservationItem in reservationItems" :key="reservationItem.id">
                            <a-card :bordered="false" hoverable>
                                <div class="info-item flex-v-center">
                                    <div class="">
                                        <img src="@/assets/myreservation.png" style="width: 24px; height: 24px"
                                            alt="" />
                                    </div>
                                    <div class="value title">{{ reservationItem.name }}</div>
                                </div>
                                <div>
                                    <a-tag size="mini" :color="reservationItem.enabled ? 'blue' : 'default'">{{
                                        reservationItem.enabled ? "已启用" : "已停止" }}</a-tag>
                                </div>
                                <div class="info-item">
                                    <div class="label">测试日期：</div>
                                    <div class="value">
                                        {{ reservationItem.startDay }} 至
                                        {{ reservationItem.endDay }}
                                    </div>
                                </div>
                                <div class="info-item">
                                    <div class="label">测试地址：</div>
                                    <div class="value">{{ reservationItem.address }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="label">最大预约人数：</div>
                                    <div class="value">{{ reservationItem.maxNum }} 人</div>
                                </div>
                                <div class="info-item">
                                    <a-space align="center">
                                        <a-button size="small" type="primary"
                                            @click="editRecord(reservationItem)">编辑信息</a-button>
                                        <a-button size="small" type="outline"
                                            @click="viewReservationDetail(reservationItem)">预约情况</a-button>
                                    </a-space>
                                </div>
                            </a-card>
                        </a-grid-item>
                    </a-grid>
                </div>
            </div>
        </div>
    </div>
    <a-modal v-model:visible="showAddDialog" width="1000px" title="创建预约项" :footer="null">
        <div style="height: 700px">
            <a-form ref="submitForm" size="large" auto-label-width :model="submitData"
                @submit-success="handleSubmitSuccess">
                <a-form-item field="name" label="预约名称" :rules="[{ required: true, message: '请输入预约名称' }]">
                    <a-input v-model.trim="submitData.name" placeholder="请输入预约名称" />
                </a-form-item>
                <a-form-item field="projects" label="选择项目" :rules="[{ required: true, message: '请输入测试项目' }]">
                    <a-space wrap>
                        <a-tag size="large" v-model:checked="prj.checked" @check="checkProject"
                            v-for="prj in projectList" :key="prj.value" checkable color="arcoblue">
                            <template #icon>
                                <icon-check-circle-fill />
                            </template>
                            {{ prj.value }}
                        </a-tag>
                    </a-space>
                </a-form-item>
                <a-form-item label="日期段" field="testDayList" :rules="[{ required: true, message: '请选择测试日期段' }]">
                    <div class="flex flex-column flex1">
                        <a-row :gutter="10" style="width: 100%;">
                            <a-col v-for="(dayRange, index) in submitData.testDayList" :key="index" :span="12">
                                <a-space direction="vertical" style="
                    margin-top: 10px;
                    border: 1px solid #e5e5e5;
                    padding: 10px;
                  ">
                                    <a-space>
                                        <a-button @click="removeDayRange(index)" size="small">
                                            <template #icon>
                                                <icon-delete></icon-delete>
                                            </template>
                                        </a-button>
                                        <a-date-picker size="small" v-model="dayRange.start"></a-date-picker>
                                        <a-date-picker size="small" v-model="dayRange.end"></a-date-picker>
                                    </a-space>
                                    <div>
                                        <div class="flex flex-column">
                                            <a-space v-for="(timeRange, idx) in dayRange.testTimeList" :key="index"
                                                style="margin-top: 10px">
                                                <a-time-picker size="mini" v-model="timeRange.start" :step="{
                                                    hour: 1,
                                                    minute: 30,
                                                }" format="HH:mm" />
                                                <a-time-picker size="mini" v-model="timeRange.end" :step="{
                                                    hour: 1,
                                                    minute: 30,
                                                }" format="HH:mm" />
                                                <a-button @click="removeTimeRange(dayRange, idx)" size="mini">
                                                    <template #icon>
                                                        <icon-minus></icon-minus>
                                                    </template>
                                                </a-button>
                                            </a-space>

                                            <div style="margin-top: 10px">
                                                <a-button @click="addTimeRange(dayRange)" size="mini" type="primary">
                                                    <template #icon>
                                                        <icon-plus></icon-plus>
                                                    </template>
                                                    新增时间段
                                                </a-button>
                                            </div>
                                        </div>
                                    </div>
                                </a-space>
                            </a-col>
                        </a-row>

                        <div style="margin-top: 10px">
                            <a-button @click="addDayRange" size="mini" type="primary">
                                <template #icon>
                                    <icon-plus></icon-plus>
                                </template>
                                新增日期段
                            </a-button>
                        </div>
                    </div>
                </a-form-item>
                <a-row>
                    <a-col :span="12">
                        <a-form-item field="stepMaxNum" label="时间段内最大人数" :rules="[
                            { required: true, message: '请输入每个时间段内预约最大人数' },
                        ]">
                            <a-input-number v-model="submitData.stepMaxNum" placeholder="请输入每个时间段内预约最大人数" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item field="maxNum" label="最大预约人数" :rules="[{ required: true, message: '请输入最大预约人数' }]">
                            <a-input-number v-model="submitData.maxNum" placeholder="请输入最大预约人数" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item field="address" label="测试地址" :rules="[{ required: true, message: '请输入测试地址' }]">
                            <a-input v-model="submitData.address" placeholder="请输入测试地址" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item field="enabled" label="是否启用" :rules="[{ required: true, message: '请选择是否启用' }]">
                            <a-switch v-model="submitData.enabled"></a-switch>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-form-item field="remark" label="项目测试安排备注" :rules="[{ required: true, message: '请输入项目测试安排备注' }]">
                    <a-textarea v-model="submitData.remark" auto-size placeholder="请输入项目测试安排备注" />
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button html-type="submit" type="primary">保存</a-button>
                        <a-button @click="() => {
                            showAddDialog = false;
                        }
                            ">取消</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
    <a-modal v-model:visible="visible" width="80%" title="预约列表" :footer="null">
        <div style="height: 700px">
            <a-tabs @change="tabsChange">
                <a-tab-pane key="1">
                    <template #title> <icon-calendar />预约列表</template>
                    <search-table ref="searchListTable" :auto-load="false" :params="searchModel"
                        url="/admin/v1/reservation/queryPage" :columns="columns">
                        <template #statusDesc="{ record }">
                            <a-tag :color="record.statusDesc ? 'orange' : 'blue'">{{
                                record.statusDesc
                            }}</a-tag>
                        </template>
                        <template #toolbar>
                            <a-form ref="searchFreeApplyForm" :model="searchFreeApplyModel" auto-label-width
                                label-align="left">
                                <a-row :gutter="16">
                                    <a-col :span="6">
                                        <a-form-item field="studyCode" label="学籍号">
                                            <a-input v-model="searchModel.studyCode" placeholder="请输入学籍号" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-form-item field="name" label="姓名">
                                            <a-input v-model="searchModel.name" placeholder="请输入姓名" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-form-item field="testOfDay" label="预约日期">
                                            <a-date-picker v-model="searchModel.testOfDay" placeholder="请选择预约日期" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-button type="primary" @click="() => {
                                            searchListTable.load();
                                        }
                                            ">查询</a-button>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </template>
                    </search-table>
                </a-tab-pane>
                <a-tab-pane key="2">
                    <template #title> <icon-clock-circle /> 免测申请审核 </template>
                    <search-table ref="searchFreeApplyTable" :auto-load="false" :params="searchFreeApplyModel"
                        url="/admin/v1/reservation/queryFreeTestApplyPage" :columns="freeApplyColumns">
                        <template #stateDesc="{ record }">
                            <a-tag :color="record.stateDesc ? 'orange' : 'blue'">{{
                                record.stateDesc
                            }}</a-tag>
                        </template>
                        <template #sex="{ record }">
                            {{ record.sex == '2' ? '女' : '男' }}
                        </template>
                        <template #action="{ record }">
                            <a-space>
                                <a-button v-if="record.state == 1" type="primary" size="small"
                                    @click="openReviewDialog(record)">审核</a-button>
                            </a-space>
                        </template>
                        <!-- <template #uploadFileList="{record}">
                            <a-image height="80" v-if="record.uploadFileList && record.uploadFileList.length > 0" :src="record.uploadFileList[0].url"></a-image>
                        </template> -->
                        <template #toolbar>
                            <a-form ref="searchForm" :model="searchFreeApplyModel" auto-label-width label-align="left">
                                <a-row :gutter="16">
                                    <a-col :span="6">
                                        <a-form-item field="studyCode" label="学籍号">
                                            <a-input v-model="searchFreeApplyModel.studyCode" placeholder="请输入学籍号" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-form-item field="name" label="姓名">
                                            <a-input v-model="searchFreeApplyModel.name" placeholder="请输入姓名" />
                                        </a-form-item>
                                    </a-col>

                                    <a-col :span="6">
                                        <a-button type="primary" @click="() => {
                                            searchFreeApplyTable.load();
                                        }
                                            ">查询</a-button>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </template>
                    </search-table>
                </a-tab-pane>
            </a-tabs>
        </div>
    </a-modal>
    <a-modal v-model:visible="showReviewDialog" width="600px" title="免测审核" :footer="null">
        <a-form :model="reviewData" auto-label-width>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="学籍号：">
                        <span class="value">{{ reviewData.studyCode }}</span>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="姓名：">
                        <span class="value">{{ reviewData.name }}</span>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="性别：">
                        <span class="value">{{ reviewData.sex == '1' ? '男' : '女' }}</span>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="年纪：">
                        <span class="value">{{ reviewData.gradeName }}</span>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="申请原因：">
                        <span class="value">{{ reviewData.reason }}</span>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="证明材料：">
                        <a-space>
                            <a-button v-for="(img, index) in reviewData.uploadFileList" :key="index"
                                @click="viewAttment(img)" type="dashed">查看材料{{ index + 1 }}</a-button>
                        </a-space>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="申请原因：">
                        <a-textarea v-model="reviewData.refundReason" placeholder="请输入审核不通过原因"></a-textarea>
                    </a-form-item>
                </a-col>
            </a-row>
            <div class="flex flex-center" style="margin-top: 30px;">
                <a-space>
                    <a-button type="primary" @click="reviewFreeTest(2)">审核通过</a-button>
                    <a-button @click="reviewFreeTest(3)">审核不通过</a-button>
                </a-space>
            </div>
        </a-form>
    </a-modal>
</template>
<script setup>
import { nextTick, ref } from "vue";
import planReservationApi from "@/api/planReservationApi";
import planApi from "@/api/planApi";
import reservationApi from "@/api/reservationApi";
import { Message } from "@arco-design/web-vue";
import SearchTable from "@/components/SearchTable.vue";

const historyParams = history.state.params;

const showAddDialog = ref(false);
const showReviewDialog = ref(false)
const reviewData = ref({})

const submitData = ref({
    planId: historyParams.planId,
    enabled: true,
    projects: [],
    times: [],
    testDayList: [{ start: "", end: "", testTimeList: [{ start: "", end: "" }] }],
    testTimeList: [{ start: "", end: "" }],
});

const searchModel = ref({
    planId: historyParams.planId,
    reservationId: "",
});

const searchFreeApplyModel = ref({
    planId: historyParams.planId,
    reservationId: "",
})

const projectList = ref([]);
const reservationItems = ref([]);
const currentKey = ref("");
const visible = ref(false);
const searchListTable = ref();
const searchFreeApplyTable = ref();

const tabsChange = (v) => {
    if (v == 1) {
        searchListTable.value.load();
    } else {
        searchFreeApplyTable.value.load();
    }
}

const openReviewDialog = (record) => {
    showReviewDialog.value = true;
    reviewData.value = record;
}

const viewAttment = (data) => {
    window.open(data.url, "_blank")
}

const columns = ref([
    {
        title: "学校名称",
        dataIndex: "schoolName",
        width: 120
    },
    {
        title: "计划名称",
        dataIndex: "planName",
        width: 150
    },
    {
        title: "学籍号",
        dataIndex: "studyCode",
        width: 100
    },
    {
        title: "姓名",
        dataIndex: "name",
        width: 80
    },
    {
        title: "预约日期",
        dataIndex: "testOfDay",
        width: 120
    },
    {
        title: "预约时间",
        dataIndex: "testOfTime",
        width: 120
    },
    {
        title: "状态",
        slotName: "statusDesc",
    },
    {
        title: "提交时间",
        dataIndex: "createTime",
        width: 180
    },
    {
        title: "操作",
        slotName: "action",
        fixed: "right",
        width: 150,
    },
]);

const freeApplyColumns = ref([
    {
        title: "学籍号",
        dataIndex: "studyCode",
        width: 120
    },
    {
        title: "姓名",
        dataIndex: "name",
        width: 80
    },
    {
        title: "性别",
        slotName: "sex",
        width: 80
    },
    {
        title: "年级",
        dataIndex: "gradeName",
        width: 80
    },
    {
        title: "申请免测原因",
        dataIndex: "reason",
        width: 200
    },
    // {
    //     title: "证明材料",
    //     slotName: "uploadFileList",
    // },
    {
        title: "状态",
        slotName: "stateDesc",
        width: 100
    },
    {
        title: '不通过原因',
        dataIndex: 'refundReason',
        width: 180
    },
    {
        title: "申请时间",
        dataIndex: "createTime",
        width: 180
    },
    {
        title: "操作",
        slotName: "action",
        fixed: "right",
        width: 200,
    },
]);

const viewReservationDetail = (record) => {
    visible.value = true;
    nextTick(() => {
        searchModel.value.reservationId = record.id;
        searchFreeApplyModel.value.reservationId = record.id;
        searchListTable.value.load();
    });
};

const onClickMenuItem = (key) => {
    currentKey.value = key;
    if (key == "setting") {
        listByPlanId();
    }
};

const checkProject = (checked, e) => {
    console.log(checked);
    submitData.value.projects = projectList.value
        .filter((item) => item.checked)
        .map((item) => item.value);
    console.log(submitData.value.projects);
};

const removeDayRange = (index) => {
    submitData.value.testDayList.splice(index, 1);
};

const addDayRange = () => {
    submitData.value.testDayList.push({
        start: "",
        end: "",
        testTimeList: [{ start: "", end: "" }],
    });
};

const removeTimeRange = (dayItem, index) => {
    dayItem.testTimeList.splice(index, 1);
};

const addTimeRange = (dayItem) => {
    dayItem.testTimeList.push({
        start: "",
        end: "",
    });
};

const reviewFreeTest = (state) => {
    if (state == 3 && (!reviewData.value.refundReason || !reviewData.value.refundReason.trim())) {
        Message.warning("请输入审核不通过原因")
        return;
    }
    reservationApi.reviewFreeTest({
        id: reviewData.value.id,
        state: state,
        refundReason: reviewData.value.refundReason
    }).then((res) => {
        Message.success("操作成功");
        showReviewDialog.value = false;
        searchFreeApplyTable.value.load();
    });
}

const editRecord = (record) => {
    showAddDialog.value = true;
    nextTick(() => {
        if (!record.testDayList || record.testDayList.length == 0) {
            record.testDayList = [];
            record.testDayList.push({
                start: "",
                end: "",
                testTimeList: [{ start: "", end: "" }],
            });
        } else {
            record.testDayList.forEach((element) => {
                if (!element.testTimeList || element.testTimeList.length == 0) {
                    element.testTimeList = [];
                    element.testTimeList.push({
                        start: "",
                        end: "",
                    });
                }
            });
        }
        // if (!record.testTimeList || record.testTimeList.length == 0) {
        //     record.testTimeList = [];
        //     record.testTimeList.push({
        //         start: '',
        //         end: '',
        //         testTimeList: [{ start: '', end: '' }]
        //     })
        // }
        submitData.value = Object.assign({}, record);
        queryProjectList();
    });
};

const openAddDialog = () => {
    showAddDialog.value = true;
    queryProjectList();
};

const handleSubmitSuccess = (values) => {
    console.log(values);
    planReservationApi.save(values).then((res) => {
        listByPlanId();
        Message.success("保存成功");
        showAddDialog.value = false;
    });
};

const queryProjectList = () => {
    planApi
        .queryProjectList({
            planId: historyParams.planId,
        })
        .then((res) => {
            projectList.value = [];
            if (submitData.value.projects.length == 0) {
                res.forEach((element) => {
                    projectList.value.push({
                        checked: true,
                        value: element,
                    });
                });
                submitData.value.projects = projectList.value
                    .filter((item) => item.checked)
                    .map((item) => item.value);
            } else {
                res.forEach((element) => {
                    projectList.value.push({
                        checked: submitData.value.projects.includes(element) ? true : false,
                        value: element,
                    });
                });
            }
        });
};

const listByPlanId = () => {
    planReservationApi
        .listByPlanId({
            planId: historyParams.planId,
        })
        .then((res) => {
            reservationItems.value = res;
        });
};
listByPlanId();
</script>
<style scoped>
.info-item {
    padding: 10px 0;
    display: flex;
}

.info-item .label {
    color: #999;
    font-size: 12px;
    min-width: 70px;
}

.info-item .value.title {
    padding-left: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #4e5969;
}

.info-item .value {
    color: #111;
    font-size: 12px;
}

.value {
    font-size: 15px;
    font-weight: 600;
    color: #666;
}
</style>
